<template>
  <div class="dataContainer">
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer">
      <el-form-item label="学员: ">
        <el-select
            filterable
            v-model="queryParams.studentID"
            placeholder="请选择学员" 
            style="width: 180px;"
            clearable
          >
            <el-option
              v-for="item in studentList"
              :key="item.id"
              :label="item.code+'-'+item.wechatNickname+'-'+item.phone"
              :value="item.id"
            >
                <div>
                 <div style="display: inline-block;width: 200px;">
                  <span title="学员编号">{{ item.code }}</span>
                  <span title="微信昵称" style="float:right;color:#c7c7c7;margin-right: 5px;">{{ item.wechatNickname }}</span>
                 </div>
                 <span title="手机号码" style="display: inline-block;color: var(--el-color-primary);width: 90px;">{{ item.phone }}</span>
                </div>
            </el-option>
                
            </el-select>
      </el-form-item>
      <el-form-item label="交易日期: ">
          <el-date-picker
                style="width: 180px;"
                v-model="queryParams.tradeDate"
                type="date"
                placeholder="请选择交易日期"
                size="small"
                value-format="YYYY-MM-DD"
            />
      </el-form-item>
      <el-form-item label="状态: ">
        <el-select v-model="queryParams.status" placeholder="请选择下载状态" size="small" style="width: 140px;">
					<el-option :key="1" label="全部" value="" />
					<el-option :key="2" label="成功" value="1" />
					<el-option :key="3" label="失败" value="-1" />
				</el-select>
      </el-form-item>

      <el-form-item>
        <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
        <ResetButton :queryParams="queryParams"/>
        <el-button size="small" type="primary" @click="downloadHandler"><el-icon><Download /></el-icon>下 载 </el-button>
        <el-button size="small" type="primary" @click="downloadErrorHandler"><el-icon><Download /></el-icon>下载全部已失败 </el-button>
      </el-form-item>
    </el-form>
    <!-- Table start -->
    <div >
      <el-table
        ref="tableRef"
        v-loading="tableLoading"
        :border="true"
        class="bs-table"
        :data="tableData"
        row-key="id"
        :height="tableHeight"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{textAlign: 'center'}"
        table-layout='fixed'
      >
        <el-table-column type="index" label="序号" width="80" fixed/>
        <template v-for="item in columnList" :key="item.prop">
          <el-table-column :prop="item.prop" :show-overflow-tooltip="item.showOverflowTooltip" :label="item.label"  :fixed="item.fixed" :sortable:="item.sortable" v-if="!item.hide && item.prop!='action'" :width="item.width">
            <template #default="scope">
              <template v-if="item.prop=='status'">
                <div v-if="scope.row.status==1">
                    <el-tag type="primary">成功</el-tag>
                </div>
                <div v-else>  
                    <el-tag type="danger">失败</el-tag>
                </div>
              </template>
              <template v-else-if="item.prop =='message'">
                <div style="width: 500px;">
									<el-popover effect="dark" placement="right" title="" trigger="hover" :width="500"
										:content="scope.row[item.prop]" popper-class="define-popper" :teleported="true">
										<template #reference>
											<div class="textHiding">{{ scope.row[item.prop] }}</div>
										</template>
									</el-popover>
								</div>
              </template>
              <template v-else>
                {{ scope.row[item.prop] }}
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="190" fixed="right" v-if="item.prop=='action'">
            <template #default="scope">
              <el-button size="small" link type="primary" @click="reDownloadHandler(scope.row.studentID,scope.row.tradeDate)"><el-icon><Download /></el-icon>重新下载 </el-button>
              <el-button size="small" link type="primary" :disabled="scope.row.status != 1"
               @click="viewExcel(scope.row.filePath)"><el-icon><View /></el-icon>查看文件 </el-button>
            </template>
          </el-table-column>

        </template>
      </el-table>
      <pagination
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        small="small"
        disabled="disabled"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        @pagination="selectByPage"
      />
      <ViewExcel ref="viewExcelRef"/>
    </div>
  </div>
</template>
<script>
import { ElLoading } from 'element-plus'
import { selectByPage, getFileData } from '@/api/oss/importLog.js'
import { getAll } from '@/api/oss/student.js'
import { mapState } from 'vuex'
import ViewExcel from './excelView.vue'
export default {
  components:{
    ViewExcel,
  },
  data() {
      return {
        tableTotal: 0,
        tableLoading: false,
        tableData: [],
        // 查询参数
        queryParams: {
            pageNo: 1,
            pageSize: 500,
            studentID:undefined,
            tradeDate:undefined,
            status:undefined,

        },
        columnList:[
            {prop:'studentAccount',label:'保证金监控中心账号',sortable:false,sort:0,hide:false,fixed:true,width:130},
            {prop:'studentName',label:'学员名称',sortable:false,sort:0,hide:false,fixed:true,width:130},
            {prop:'code',label:'学员编号',sortable:false,sort:0,hide:false,fixed:true,width:130},
            {prop:'tradeDate',label:'交易日期',sortable:false,sort:0,hide:false,fixed:true,width:120},
            {prop:'status',label:'状态',sortable:false,sort:0,hide:false,fixed:true,width:120},
            {prop:'message',label:'相关信息',sortable:false,sort:0,hide:false,fixed:true,width:220,showOverflowTooltip:true},
            {prop:'createTime',label:'创建时间',sortable:false,sort:0,hide:false,fixed:false,width:200},
            {prop:'action',label:'操作',sortable:false,sort:0,hide:false,fixed:false,width:200},
        ],
        tableHeight:(window.innerHeight - 380) + 'px',
        // 学员列表
        studentList:[],
      }
  },
  created() {
    // 列的sort字段按照index赋值
    this.columnList = this.columnList.map((item,index)=>{item.sort = index+1;return item})
  },
  computed:{
      ...mapState(['amplify'])
  },
  mounted(){
      this.$nextTick(()=>{
          this.countTableHeight()
          this.selectByPage()
      })
      // 获取所有学员信息
      getAll({}).then(res=>{
        if (res.code == 1) {
            this.studentList = res.data
        }
      })
  },
  methods: {
    viewExcel(path){
      this.$refs.viewExcelRef.openModal(path)
    },
    // 重新下载事件
    reDownloadHandler(studentID,tradeDate){
      this.queryParams.studentID = studentID
      this.queryParams.tradeDate = tradeDate
      this.downloadHandler()
    },
    // 下载事件
    downloadHandler(){
      if (this.isBlank(this.queryParams.studentID)) {
        this.$message.warning('请选择学员!')
      } else if (this.isBlank(this.queryParams.tradeDate)) {
        this.$message.warning('请选择交易日期!')
      } else {
        const loading = ElLoading.service({
          lock: true,
          text: '文件下载中, 请稍后......',
          background: 'rgba(0, 0, 0, 0.7)',
        });
        getFileData(this.queryParams).then(res=>{
          if (res.code == 1) {
            this.$message.success(res.message)
            this.onSearch()
          } else {
            this.$message.error(res.message)
          }
        }).finally(()=>{
          loading.close()
        })
      }
      console.log('downloadHandler下载事件触发=',this.queryParams);
    },
    // 下载全部已失败事件
    downloadErrorHandler(){
      if (this.isBlank(this.queryParams.tradeDate)) {
        this.$message.warning('请选择交易日期!')
      } else {
        const loading = ElLoading.service({
          lock: true,
          text: '文件下载中, 请稍后......',
          background: 'rgba(0, 0, 0, 0.7)',
        });
        getFileData(this.queryParams).then(res=>{
          if (res.code == 1) {
            this.$message.success(res.message)
            this.onSearch()
          } else {
            this.$message.error(res.message)
          }
        }).finally(()=>{
          loading.close()
        })
      }
      console.log('downloadErrorHandler下载事件触发=',this.queryParams);
    },
    // 搜索事件
    onSearch() {
        this.queryParams.pageNo = 1
        this.selectByPage()
    },
    // 分页查询事件
    selectByPage() {
        this.tableLoading = true
        selectByPage(this.queryParams).then((res) => {
          this.tableLoading = false
          if (res.code === 1) {
              this.tableData = res.data.records
              this.tableTotal = res.data.total
          }
        }).catch(() => {
            this.tableLoading = false
        })
    },
    // 表格高度
    countTableHeight(){
      let tableHeight = (window.innerHeight - 380) + 'px'
      // 计算搜索区域
      var searchContainerList =  document.getElementsByClassName("searchContainer")
      if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
                let searchContainerHeight = searchContainerList[0].offsetHeight
                // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
                let staticHeight = 60+38+30+15
                if (this.amplify == true) {
                    // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
                    tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
                } else {
                    tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
                }
                this.tableHeight = tableHeight
            }
    },
  },
  watch: {
      amplify(newValue,oldValue) {
          this.countTableHeight()
      },
  },
}
</script>
<style lang="css" scoped>
:deep(.el-scrollbar) {
    text-align: left;
}
</style>